<template>
	<view class="container">
<!-- 	  <view class="cell1" @click="goToMyResume1">
	    <view>
	      <image :src="info.avatar" class="avator"></image>
	      <view>
	        <view style="display: flex;flex-direction: row;align-items: center;">
	          <view class="name">{{info.name}}</view>
	        </view> 
	        <view class="edit">编辑基本信息</view>
	      </view>
	    </view>
	    <image src="/static/icon/right.png" class="right"></image>
	  </view> -->
	  <view class="cell">
	    <view class="cell_text">工作经历</view>
	    <view @click="goToWorkExperienceAdd"> 
	      <image src="/static/icon/add.png" class="right"></image>
	      <view class="tianjia">添加</view> 
	    </view>
	  </view>
	  <view>
	    <view v-for="item in work">
	      <view class="cell_item">
	        <view style="width: 100%;height: 110rpx;" @click="goToWorkExperienceEdit(item)">
	          <view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
	            <view style="display: flex;flex-direction: row;align-items: center;">
	              <view class="circle"></view>
	              <view class="cell_item_title">{{item.work}}/{{item.name}}</view>
	            </view>
	            <image src="/static/icon/edit.png" class="edit_img"></image>
	          </view>
	          <view class="cell_item_time">{{item.dateStart.substring(0,9)}} - {{item.dateOver.substring(0,9)}}</view>
	          <!-- <view class="cell_item_remark">{{item.content ? item.content: ''}}</view> -->
	        </view>
	      </view>
	    </view>
	  </view>
	  <view class="cell">
	    <view class="cell_text">教育经历</view>
	    <view @click="goToEducationExperienceAdd">
	      <image src="/static/icon/add.png" class="right"></image>
	      <view class="tianjia">添加</view>
	    </view>
	  </view>
	  <view>
	    <view v-for="item in education" >
	      <view class="cell_item">
	        <view style="width: 100%;height: 110rpx;" @click="goToEducationExperienceEdit(item)">
	          <view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
	            <view style="display: flex;flex-direction: row;align-items: center;">
	              <view class="circle"></view>
	              <view class="cell_item_title">{{item.work}}/{{item.name}}</view>
	            </view>
	            <image src="/static/icon/edit.png" class="edit_img"></image>
	          </view>
	          <view class="cell_item_time">{{item.dateStart.substring(0,9)}} - {{item.dateOver.substring(0,9)}}</view>
	        </view>
	      </view>
	    </view>
	  </view>
	  <!-- <view class="cell">
	    <view class="cell_text">个人描述</view>
	    <view @click="goToPersonalDescriptionEdit">
	      <image src="/static/icon/edit.png" class="right"></image>
	      <view class="tianjia">编辑</view>
	    </view>
	  </view>
	  <view class="miaoshu">
	    {{info.desc}}
	  </view> -->
	  <!-- 占位 -->
	  <view style="width: 100%;height: 150rpx;"></view>
	  <!-- 占位 -->
	</view>
	
	
</template>
<script>
	import {
		userInfoSave,
		serverDetailApi,
	} from '@/api/service.js'
	import {
		getUserInfoApi,
	} from '@/api/user.js'
	import baseURL from "@/config/config.js"
	import {
		Upload
	} from "@/utils/upload.js"
	import dayjs from "dayjs"
	import {
		onLoad,
		onUnload,
		onReady,
		onShow
	} from "@dcloudio/uni-app"

	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	import {
		useStore
	} from '@/store/index.js' 
	export default {
		setup() {
			const store = useStore()
			const datetimePickerRef = ref(null);
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				show: false,
				loading: false,
			    info: {
					desc:'暂未添加任何描述哦~'
				},
			    work: [],
			    education: [],
			    project: [],
			    desc:'暂未添加任何描述哦~'
			})
			onLoad((option) => {
			})

			onShow(()=>{
				getData();
			})
			onReady(() => {
				// 微信小程序需要用此写法
			})
			// 获取人个信息
			const getData = async () => {
				const {
					data
				} = await serverDetailApi(store.userInfo.id)
				// data.realName = data.userName;
				state.education = data.eduExperiences
				state.work = data.workExperiences

			}
			const getUserInfo = async () => {
				state.form = state.userInfo
			}
			const goBack = () => {
				uni.navigateBack(-1)
			}
			function goToWorkExperienceAdd(){
				uni.navigateTo({
					url:"/subpages/resume/workExperience"
				})
			}
			function goToWorkExperienceEdit(item){
				 uni.navigateTo({
				 	url:"/subpages/resume/workExperience?id="+item.id+
					"&name="+item.name+"&work="+item.work+
					"&dateStart="+item.dateStart+"&dateOver="+item.dateOver
				 })
			}
			function goToMyResume1(){
				 
			}
			function goToEducationExperienceAdd(){
				uni.navigateTo({
					url:"/subpages/resume/eduExperience"
				})
			}
			function goToEducationExperienceEdit(item){
				uni.navigateTo({
					url:"/subpages/resume/eduExperience?id="+item.id+
					"&name="+item.name+"&work="+item.work+
					"&dateStart="+item.dateStart+"&dateOver="+item.dateOver
				})
			}
			function goToPersonalDescriptionEdit(item){
				
			}
			return { 
				...toRefs(state),
				baseURL,
				datetimePickerRef,
				goBack,
				getUserInfo,
				goToWorkExperienceAdd,
				goToWorkExperienceEdit,
				goToMyResume1,
				goToEducationExperienceAdd,
				goToEducationExperienceEdit,
				goToPersonalDescriptionEdit
			}
		}

	}
</script>
<style>
	page {
		background-color: #fff;
		font-size: 32rpx;
	}
</style>
<style scoped lang="scss">
	.container {
		min-height: 100vh;
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));
	}
.cell1 {
  width: 100%;
  height: 140rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* background-color: rebeccapurple; */
}

.cell1>view {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 20rpx;
}

.avator {
  width: 112rpx;
  height: 112rpx;
  border-radius: 70rpx;
}

.name {
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  margin-left: 20rpx;
}

.isGongkai {
  font-size: 13px;
  font-family: Source Han Sans CN-Light, Source Han Sans CN;
  font-weight: 300;
  color: #298FCD;
  margin-left: 40rpx;
}

.edit {
  font-size: 12px;
  font-family: Source Han Sans CN-Light, Source Han Sans CN;
  font-weight: 300;
  color: #8B8B8B;
  margin-left: 20rpx;
  margin-top: 10rpx;
}

.right {
  width: 20rpx;
  height: 20rpx;
  margin-right: 25rpx;
  margin-left: 10rpx;
}

.cell {
  width: 100%;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.cell>view {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 20rpx;
}

.cell_text {
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.tianjia {
  font-size: 13px;
  font-family: Source Han Sans CN-Light, Source Han Sans CN;
  font-weight: 300;
  color: #8B8B8B;
  margin-right: 25rpx;
}

.miaoshu {
  font-size: 13px;
  font-family: Source Han Sans CN-Light, Source Han Sans CN;
  font-weight: 300;
  color: #666666;
  margin: 0 25rpx 0 20rpx;
}

.yulan {
  width: 106rpx;
  height: 106rpx;
  border-radius: 60rpx;
  background-color: #298FCD;
  display: flex;
  position: fixed;
  bottom: 152rpx;
  right: 46rpx;
}

.yulan>view {
  margin: auto;
  font-size: 16px;
  font-family: Source Han Sans CN-Light, Source Han Sans CN;
  font-weight: 300;
  color: #FFFFFF;
}

.circle {
  width: 16rpx;
  height: 16rpx;
  background-color: #298FCD;
  border-radius: 8rpx;
  margin: 0 20rpx 0 20rpx;
}

.cell_item_title {
  font-size: 13px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.edit_img {
  width: 28rpx;
  height: 28rpx;
  margin: 0 20rpx 0 0;
}

.cell_item_time {
  margin: 20rpx 0 20rpx 56rpx;
  font-size: 12px;
  font-family: SimHei-Regular, SimHei;
  font-weight: 400;
  color: #666666;
}

.cell_item_remark {
  margin: 20rpx 0 20rpx 56rpx;
  font-size: 12px;
  font-family: Source Han Sans CN-Light, Source Han Sans CN;
  font-weight: 300;
  color: #666666;
}
</style>